<template>
  <div class="">
    <public-dialog :title="titleName" width="60%" dialogCenter :visible="visible" @update:visible="onVisibleChange"
      :footerButton="false">
      <div v-loading="loading" element-loading-text="加载中...">
        <!-- 步骤条 -->
        <div>
          <el-steps :active="activeStep" align-center process-status="finish">
            <el-step :icon="Clock">
              <template #title>
                <span class="title-style">申请开票</span>
              </template>
              <template #description>
                <span>{{ formInline.createUserName }}</span>
                <br>
                <span>{{ formInline.createTime }}</span>
              </template>
            </el-step>
            <el-step :icon="CircleCheck">
              <template #title>
                <span class="title-style">
                  {{ { 1: "待审核", 2: "审核通过", 3: "审核驳回" }[formInline.approvalStatus] }}
                </span>
              </template>
              <template #description>
                <span>{{ formInline.approvalUserName }}</span>
                <br>
                <span>{{ formInline.approvalTime }}</span>
              </template>
            </el-step>
            <el-step :icon="CircleCheck">
              <template #title>
                <span class="title-style">{{ { 0: "待推送", 1: "已推送", "-1": "失败" }[formInline.pushStatus] }}</span>
              </template>
              <template #description>
                <span>{{ formInline.pushUserName }}</span>
                <br>
                <span>{{ formInline.pushTime }}</span>
              </template>
            </el-step>
            <el-step :icon="CircleCheck">
              <template #title>
                <span class="title-style">
                  {{ { 0: "待开票", 1: "已开票", "-1": "已作废", "-2": "已红冲" }[formInline.billingStatus] }}
                </span>
              </template>
              <template #description>
                <span>{{ formInline.receiptDate }}</span>
              </template>
            </el-step>
          </el-steps>
        </div>
        <!-- 详细数据 -->
        <el-form :model="formInline" label-width="120" ref="formRef" @submit.native.prevent
          style="margin-top: 20px;height: 65vh;overflow: auto;padding-right: 10px;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="开票编码">
                <el-input v-model="formInline.receiptId" placeholder="请输入开票编码" clearable style="width: 100%;" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开票类型">
                <el-select v-model="formInline.receiptType" placeholder="请选择开票类型" clearable style="width: 100%;" disabled>
                  <!-- 1-普通 2-专用 -->
                  <el-option label="普通" :value="1" />
                  <el-option label="专用" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票号码">
                <el-input v-model="formInline.receiptNumber" placeholder="请输入发票号码" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票代码">
                <el-input v-model="formInline.receiptCode" placeholder="请输入发票代码" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合计金额">
                <el-input v-model="formInline.receiptAmount" placeholder="请输入合计金额" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合计税额">
                <el-input v-model="formInline.receiptTaxAmount" placeholder="请输入合计税额" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="价税合计">
                <el-input v-model="formInline.receiptTotalAmount" placeholder="请输入价税合计" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票备注">
                <el-input v-model="formInline.receiptRemark" placeholder="请输入发票备注" type="textarea" clearable rows="3"
                  resize="none" style="width: 100%;" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="内部备注">
                <el-input v-model="formInline.internalRemark" placeholder="请输入内部备注" type="textarea" clearable rows="3"
                  resize="none" style="width: 100%;" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件">
                <div>
                  <span v-if="formInline.fileAddress">
                    <el-link @click="toDocument(formInline.fileAddress)" style="color: var(--el-color-primary);">
                      {{ formInline.fileAddress }}
                    </el-link>
                  </span>
                  <span v-else>暂无附件</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 销方信息 -->
          <el-row class="m-t20 m-b30">
            <!-- <el-col :span="24">
              <el-form-item label="销方信息"></el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="销方名称">
                <el-input v-model="formInline.seller.name" placeholder="请输入销方名称" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销方识别号">
                <el-input v-model="formInline.seller.idNumber" placeholder="请输入销方识别号" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销方地址">
                <el-input v-model="formInline.seller.address" placeholder="请输入销方地址" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销方电话">
                <el-input v-model="formInline.seller.phone" placeholder="请输入销方电话" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销方开户行">
                <el-input v-model="formInline.seller.bankName" placeholder="请输入销方开户行" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销方账号">
                <el-input v-model="formInline.seller.bankAccount" placeholder="请输入销方账号" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 购方信息 -->
          <el-row class="m-b30">
            <!-- <el-col :span="24">
              <el-form-item label="购方信息"></el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="购方名称">
                <el-input v-model="formInline.buyer.name" placeholder="请输入购方名称" clearable style="width: 100%;" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购方识别号">
                <el-input v-model="formInline.buyer.idNumber" placeholder="请输入购方识别号" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购方地址">
                <el-input v-model="formInline.buyer.address" placeholder="请输入购方地址" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购方电话">
                <el-input v-model="formInline.buyer.phone" placeholder="请输入购方电话" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购方开户行">
                <el-input v-model="formInline.buyer.bankName" placeholder="请输入购方开户行" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购方账号">
                <el-input v-model="formInline.buyer.bankAccount" placeholder="请输入购方账号" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 特殊票种 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="特殊票种">
                <!-- 0-否 1-不动产租赁 -->
                <el-select v-model="formInline.specialType" placeholder="请选择特殊票种" clearable style="width: 100%;" disabled>
                  <el-option label="否" :value="0" />
                  <el-option label="不动产租赁" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 特殊票种为否时，不显示以下字段 -->
            <template v-if="formInline.specialType === 1">
              <el-col :span="6">
                <el-form-item label="不动产地址">
                  <el-input v-model="formInline.specialType1Vo.realEstateAddress" placeholder="请输入不动产地址" clearable
                    style="width: 100%;" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="租赁起止日">
                  <el-input v-model="formInline.specialType1Vo.leaseTime" placeholder="请输入租赁起止日" clearable
                    style="width: 100%;" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="跨地（市）标志">
                  <el-select v-model="formInline.specialType1Vo.isCross" placeholder="请选择是否为跨地（市）标志" clearable
                    style="width: 100%;" disabled>
                    <el-option label="否" :value="0" />
                    <el-option label="是" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
          <!-- 发票明细 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="发票明细"></el-form-item>
              <public-table :table-option="tableOption" :table-data="formInline.itemList" :height="300" :isPaging="false"
                style="padding-left: 55px;" border :index="false">
                <template #indexNum="{ $index }">
                  <span>{{ $index + 1 }}</span>
                </template>
              </public-table>
            </el-col>
          </el-row>
          <!-- 业务单据 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="业务单据">
                <el-button class="button_view" size="small" @click="viewApplyHandler">查看OA申请</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同名称">
                <el-input v-model="formInline.business.contractName" placeholder="请输入合同名称" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同编号">
                <el-input v-model="formInline.business.contractNumber" placeholder="请输入合同编号" clearable
                  style="width: 100%;" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="承租方">
                <el-input v-model="formInline.business.lessee" placeholder="请输入承租方" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="租赁面积">
                <el-input v-model="formInline.business.leaseArea" placeholder="请输入租赁面积" clearable style="width: 100%;"
                  disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </public-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElForm, ElFormItem, ElRow, ElCol, ElInput, ElSelect, ElOption, ElLoading, ElSteps, ElStep, ElButton, ElLink } from "element-plus";
import { Clock, CircleCheck } from "@element-plus/icons-vue"
import PublicDialog from "@/components/PublicDialog.vue";
import PublicTable from "@/components/PublicTable.vue";
import { invoiceListApi } from "@/api/businessFinance.js";
import router from "@/router";

let titleName = ref("");
let visible = ref(false);
let formInline = reactive({
  seller: {},
  buyer: {},
  specialType: "",
  specialType1Vo: {},
  business: {},
});
let formRef = ref(null);

let tableOption = ref([
  {
    prop: "",
    label: "序号",
    minWidth: 100,
    slot: true,
    slotName: "indexNum"
  },
  {
    prop: "name",
    label: "项目名称",
    minWidth: 100
  },
  {
    prop: "certificateNumber",
    label: "产权证书/不动产权证号",
    minWidth: 200
  },
  {
    prop: "specification",
    label: "面积单位/规格型号",
    minWidth: 170
  },
  {
    prop: "quantity",
    label: "数量",
    minWidth: 100
  },
  {
    prop: "unitPrice",
    label: "单价",
    minWidth: 100
  },
  {
    prop: "amount",
    label: "项目金额",
    minWidth: 100
  },
  {
    prop: "taxRate",
    label: "税率(%)",
    minWidth: 100,
  },
  {
    prop: "taxAmount",
    label: "税额",
    minWidth: 100
  },
  {
    prop: "totalAmount",
    label: "价税合计",
    minWidth: 100
  },
]);

let onVisibleChange = (booleanValue) => {
  if (!booleanValue) {
    formRef.value.resetFields();
  }
  visible.value = booleanValue;
};

let openHandler = (title, row) => {
  titleName.value = title;
  visible.value = true;
  getInfo(row.receiptId);
};

let loading = ref(false);
let activeStep = ref(0);
let getInfo = async (id) => {
  loading.value = true;
  let res = await invoiceListApi.getInfo({
    receiptId: id
  }).catch(err => {
    loading.value = false;
  });
  if (res.data) {
    for (let key in res.data) {
      if (formInline.hasOwnProperty(key)) {
        if (res.data[key]) {
          formInline[key] = res.data[key];
        }
      } else {
        formInline[key] = res.data[key];
      }
      if (key === "specialType1Vo" && formInline[key]) {
        formInline[key]["leaseTime"] = `${formInline[key]["leaseBeginDate"]} 至 ${formInline[key]["leaseEndDate"]}`;
      }
    }
    // 审核状态-approvalStatus 1待审核 2通过 3驳回
    // 推送状态 - pushStatus 0待推送 1已推送 -1失败
    // 开票状态 - billingStatus 0待开票 1已开票 -1已作废 -2已红冲
    if (formInline["approvalStatus"] === 1) {
      activeStep.value = 0;// 待审核
    } else if (formInline["approvalStatus"] === 3) {
      activeStep.value = 1;// 审核驳回
    } else {
      // 审核通过
      if (formInline["pushStatus"] === 0) {
        activeStep.value = 1;// 待推送
      } else if (formInline["pushStatus"] === -1) {
        activeStep.value = 2;// 推送失败
      } else {
        // 已推送
        if (formInline["billingStatus"] === 0) {
          activeStep.value = 2;// 未开票
        } else {
          activeStep.value = 3;// 已开票
        }
      }
    }
  }
  loading.value = false;
};

// 查看OA申请
let viewApplyHandler = () => {
  // 等OA接口
    window.open(formInline.oaurl)
};

const toDocument = (url) => {
  let type = url.substring(url.lastIndexOf('.')).toLowerCase();
  let fileUrlKey = url.replaceAll("/","@")
  switch (type) {
      case '.pdf':
          // window.open(`/document/pdf/${fileUrlKey}`);
          window.open(url);
          break;
      case '.ofd':
          window.open(`/document/ofd/${fileUrlKey}`);
          break;
      case '.docx':
          window.open(`/document/docx/${fileUrlKey}`);
          break;
      default:
          window.open(url);
          break;
  }
}

defineExpose({
  openHandler
});
</script>

<style lang="scss" scoped>
.title-style {
  font-size: 14px;
}
</style>
